<template>
    <div class="c2">
      <div class="header-warpper" @click="$router.back(-1)">
         <img src="../../assets/l_jt.png" alt="">
         <span>C2认证</span>
      </div>

        <div class="m-label">姓名</div>
      <div class="m-input-box">
         <input class="m-input" type="text" value="" placeholder="请输入姓名" v-model="nick_name">
      </div>
      <!-- <div class="m-label">证件类型</div>
      <div class="m-input-box">
         <input class="m-input" type="text" value="" placeholder="身份证" v-model="z_lx">
      </div> -->
      <div class="m-label">证件号码</div>
      <div class="m-input-box">
         <input class="m-input" type="text" value="" placeholder="请输入你的证件号码" v-model="z_num">
      </div>

      <div class="t_title">请上传您的证件照</div>
      <div class="m-file-box zmz">
         <img v-if="isShow1" class="ns2" :src="simg1" alt="">
         <img v-if="noShow" class="ns2" :src="simgs1" alt="">
         <img v-if="isShow11" class="ws1" src="../../assets/add1.png" alt="">
         <input ref="files" type="file" v-if="istrue" class="m-file" accept="image/*" @change="selectImg">
      </div>
      <p class="zp">证件正面照</p>
      <div class="m-file-box fmz">
         <img v-if="isShow2" class="ns2" :src="simg2" alt="">
         <img v-if="noShow" class="ns2" :src="simgs2" alt="">
         <img v-if="isShow22" class="ws1" src="../../assets/add1.png" alt="">
         <input ref="files" v-if="istrue" type="file" class="m-file" accept="image/*" @change="selectImg1">
      </div>
      <p class="zp">证件反面照</p>
      <!-- <div class="m-file-box qsz">
         <img v-if="isShow3" class="ns2" :src="simg3" alt="">
         <img v-if="noShow" class="ns2" :src="simgs3" alt="">
         <img v-if="isShow33" class="ws1" src="../../assets/add1.png" alt="">
         <input ref="files" v-if="istrue" type="file" class="m-file" accept="image/*" @change="selectImg2">
      </div>
      <p class="zp">手持证件照</p> -->

      <div class="red_btn" @click="send" v-if="titlepush=='提交'">{{titlepush}}</div>
      <div class="red_btn" v-else>{{titlepush}}</div>
      <div style="height:1.333333rem"></div>
      <Tabbar :idx="5"/>
    </div>

</template>

<script>
// @ is an alias to /src
import Tabbar from '@/views/public/Tabbar.vue'

export default {
  name: 'add_bank',
  components: {
    Tabbar
  },
   data() {
    return {
       nick_name:'',
       z_lx:'',
       z_num:'',
       wx:'',
       trad_pass:'',
       code:'',
       isShow1:false,
       isShow2:false,
       isShow3:false,
       noShow:false,
       isShow11:true,
       isShow22:true,
       isShow33:true,
       simg1:'',
       simg2:'',
       simg3:'',
       simgs1:'',
       simgs2:'',
       simgs3:'',
      titlepush:'提交',
      istrue:true
    }
  },
  created:function(){
    this.getinfo();
  },
  mounted () {
    this.$axios.post("/index/apply/index")
      .then(res => {
          if(res.data.code == 0){
              switch(res.data.info.user.real_pass){
                case 1:
                  this.titlepush="提交"
                break
                case 2:
                  this.istrue=false;
                  this.titlepush="已认证成功"
                break
                case 3:
                  this.titlepush="待审核"
                break

              }
          }
      })
  },
  methods: {
    getinfo (){

      this.$axios.post("/index/usercenter/real",{})
      .then(res => {
          if(res.data.code == 0){
            this.nick_name = res.data.info.real_name;
            this.z_num = res.data.info.id_num;
            this.mobile = res.data.info.mobile;

            if(res.data.info.positive){
               this.simg1 = res.data.info.positive;
              this.simgs1 = res.data.info.positive;
              this.isShow1 = true;
              this.isShow11 = false;
             }
              if(res.data.info.back){
               this.simg2 = res.data.info.back;
              this.simgs2 = res.data.info.back;
              this.isShow2 = true;
              this.isShow22 = false;
             }
              if(res.data.info.szz){
               this.simg3 = res.data.info.szz;
              this.simgs3 = res.data.info.szz;
              this.isShow3 = true;
              this.isShow33 = false;
             }


          }
      })


    },
    selectImg: function(e){
         this.file = e.target.files[0];
         let fd= new FormData();
         fd.append("file", this.file);

         // console.log(fd.get('file'))
        //  ajax data是data;将图片放在this.simg
        this.$axios.post("/index/upload/uploadimg",
        fd)
        .then(res => {
          console.log(res)
          if(res.data.code==0){

              this.simg1 = res.data.data;
              this.simgs1 = res.data.data;
              this.isShow1 = true;
              this.isShow11 = false;

          }else{

            alert(res.data.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    selectImg1: function(e){
         this.file = e.target.files[0];
         let fd= new FormData();
         fd.append("file", this.file);

         // console.log(fd.get('file'))
        //  ajax data是data;将图片放在this.simg
        this.$axios.post("/index/upload/uploadimg",
        fd)
        .then(res => {
          console.log(res)
          if(res.data.code==0){

              this.simg2 = res.data.data;
              this.simgs2 = res.data.data;
              this.isShow2 = true;
              this.isShow22 = false;

          }else{

            alert(res.data.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    selectImg2: function(e){
         this.file = e.target.files[0];
         let fd= new FormData();
         fd.append("file", this.file);

         // console.log(fd.get('file'))
        //  ajax data是data;将图片放在this.simg
        this.$axios.post("/index/upload/uploadimg",fd)
        .then(res => {
          console.log(res)
          if(res.data.code==0){

              this.simg3 = res.data.data;
              this.simgs3 = res.data.data;
              this.isShow3 = true;
              this.isShow33 = false;

          }else{

            alert(res.data.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    send (event){

      let self = this;

      this.toast2 = this.$createToast({
        txt: '请上传证件正面照',
        type: 'txt'
      });

      if(!this.simg1){
        return this.toast2.show();
      }

      this.toast3 = this.$createToast({
        txt: '请上传证件反面照',
        type: 'txt'
      });

      if(!this.simg2){
        return this.toast3.show();
      }

      // this.toast4 = this.$createToast({
      //   txt: '请上传手持证件照',
      //   type: 'txt'
      // });

      // if(!this.simg3){
      //   return this.toast4.show();
      // }

      if(!this.nick_name){
        this.toast4 = this.$createToast({
          txt: '请输入姓名',
          type: 'txt'
        }).show();
        return;
      }
       if(!this.z_num){
        this.toast4 = this.$createToast({
          txt: '请输入身份证',
          type: 'txt'
        }).show();
        return;
      }

      this.$axios.post("/index/apiindex/real_appeal",
      {
        positive:this.simg1 ,
        back:this.simg2,
        nick_name:this.nick_name,
        id_num:this.z_num
        })
      .then(res => {
        if(res.data.code==0){

          alert(res.data.msg);

          setTimeout(() => {
                this.$router.push('/index');
          }, 1000);
        }else{

          alert(res.data.msg);
        }
      })
      .catch(function (error) {
        console.log(error);
      });


    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .f-flex{
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }
    .red_btn{
        width: 92%;
        margin: auto;
        margin-top: 2rem;
        margin-bottom: .2rem;
    }
    .c2{
        .zp{
            font-size: .48rem;
            margin-top: .4rem;
            font-weight: bold;
        }
        .t_title{
            color: #e56337;
            margin: .4rem auto;
            font-size: .373333rem;
            margin-top: 1rem;
        }
        .mui-add-info {
            font-size: .373333rem;
            margin-bottom: .2rem;
            line-height: 1.8;
            color: #7e87a2;
            text-align: left;
            padding-left: 4%;
            padding-right: 4%;
            span{
                    color: #10131e;
                    font-weight: 700;
            }
        }
        .m-label{
            padding-left: 4%;
        }
        .m-file-box{
            .f-flex();
            margin: auto;
            justify-content: center;
            position: relative;
            margin-top: .64rem;
            width: 82%;
            height: 5.333333rem;
            border-radius: .08rem;
            overflow: hidden;
            .ns1{
                width: 100%;
                height: 100%;
            }
            .ws1{
                width: 2.4rem;
                height: 2.4rem;
            }
            .ns2{
                width: 100%;
                height: 100%;
            }
            .m-file{
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    cursor: pointer;
                }
        }
         .zmz{
            background: url('../../assets/zmz.png') no-repeat;
            background-size: 100% 100%;
         }
         .fmz{
            background: url('../../assets/bmz.png') no-repeat;
            background-size: 100% 100%;
         }
         .qsz{
            background: url('../../assets/rxz.png') no-repeat;
            background-size: 100% 100%;
         }
        .m-input-box{
            padding-right: 0;
            margin-left: 4%;
            justify-content: space-between;
                span{
                    width: 35%;
                    color: #e56337;
                    font-size: .373333rem;
                    margin-top: .58rem;
                    margin-right: 4%;

                    }
                    img{
                        margin-right: .4rem
                    }
                .qh{
                    .f-flex();
                    img{
                        width: .48rem;
                        height: .48rem;
                        margin-top: .5rem;
                        margin-right: .32rem;
                    }
                }
                .r_qh{
                    width: .373333rem;
                    height: .373333rem;
                }
        }
        .m-input{
            color: #000;
            font-size: .426667rem;
            font-weight: bold;
        }
        .xga{
            padding-right: 4%;
            width: 30%;
            .f-flex();
            margin-top: .8rem;
            font-size: .373333rem;
            span{
                padding-right: .2rem;
                color: #aab2ca;
            }
            img{
                margin-top: 0;
            }
        }
    }
</style>

